<template>
    <div class="contentBox">
        <!-- banner -->
        <div class="imgSwiperWrap">
            <swiper class="imgSwiper"
                    auto
                    loop
                    :interval=5000
                    height="160px"
                    :show-dots="false">
                <swiper-item class="swiper-demo-img"
                             v-for="(item, index) in imgList"
                             :key="index">
                    <img class="swiperImg"
                         :src="item.imgUrl">
                    <!-- {{item.imgUrl}} -->
                </swiper-item>
            </swiper>
            <div class="broadMarqueeWrap">
                <marquee class="broadMarquee"
                         direction="up"
                         :interval=3000>
                    <marquee-item v-for="(item,index) in broadcastList"
                                  :key="index">
                        <div class="broadcastMsg">{{item.Title}}</div>
                        <button class="moreBtn"
                                @click="$router.push('/inform')">更多</button>
                    </marquee-item>
                </marquee>
                <p v-if="broadcastList.length == 0">暂无通知公告...</p>
                <router-link to="/inform"
                             v-if="broadcastList.length == 0">更多</router-link>
                <div class="backBench"></div>
            </div>
        </div>
        <!-- 单位名称 -->
        <div class="unitSection clear">
            <div class="unitSection_l fl">
                <p class="unitSectionName">单位名称</p>
            </div>
            <div class="unitSection_r fr">
                <span>{{userInfo.deptname}}</span>
            </div>
        </div>

        <!-- 待办事项 -->
        <div class="backlog">
            <header class="backlogHead clear">
                <h4 class="backlogHead_l fl">待办事项</h4>
                <div v-if="homeTodoList2.length>3"
                     class="backlogHead_r fr"
                     @click="handleToggle">{{moreMsg}}</div>
            </header>
            <div class="backlogWrap"
                 v-if="isShow">
                <div class="backlogContent">
                    <div class="backlogList">
                        <div class="backlogItem"
                             v-if="item.Num"
                             v-for="(item,index) in homeTodoList2.slice(0,3)"
                             :key="index"
                             :class="{'unclickable':isUnClickable}"
                             @click="dbhandle(item,index)">
                            <div class="backlogNum">{{item.Num}}</div>
                            <p class="backlogTit">{{item.Name}}</p>
                        </div>
                    </div>
                </div>
                <div class="backlogContent"
                     v-show="istoggleDown">
                    <ul class="backlogList">
                        <li class="backlogItem"
                            v-for="(item,index) in homeTodoList2.slice(3)"
                            :key="index"
                            :class="{'unclickable':isUnClickable}"
                            @click="dbhandle(item,index)">
                            <div class="backlogNum">{{item.Num}}</div>
                            <p class="backlogTit">{{item.Name}}</p>
                        </li>
                    </ul>
                </div>
            </div>
            <p v-else
               class="nothings">暂无待办事项</p>
        </div>

        <!-- 安全预警 -->
        <div class="forewarning"
             v-if="departsir != '1'">
            <header class="newHeader">
                <div class="mycode">安全预警</div>
                <div class="editMsg"
                     @click="$router.push({path: '/warningEdit',query: {code: 1}})">编辑</div>
            </header>
            <div class="forewarnContent">
                <!-- 安全预警滑动轮播 -->
                <swiper class="warnSwiper"
                        :auto="false"
                        loop
                        :interval=3000
                        height='110px'
                        :show-dots="dotShow">
                    <swiper-item class="warnSwiperItem"
                                 v-for="(item, index) in homeWarnList"
                                 :key="index">
                        <div class="newlist"
                             v-for="(item2, index2) in item"
                             :key="index2"
                             :class="{'unclickable':isUnClickable}"
                             @click="yjhandle(item,item2,index2)">
                            <div class="Itop">
                                <img :src="item2.ImgUrl" />
                                <div v-if="item2.Num"
                                     class="number-show">{{item2.Num}}</div>
                            </div>
                            <p class="Ibottom">
                                {{item2.Name}}
                            </p>
                        </div>
                    </swiper-item>
                </swiper>
            </div>
        </div>

        <!-- 安全指标 -->
        <div class="indicant">
            <div class="indicantList">
                <header class="newHeader">
                    <div class="mycode">安全指标</div>
                    <div class="editMsg"
                         @click="$router.push({path: '/warningEdit',query: {code: 2}})">编辑</div>
                </header>
                <div class="indicantContent itemT itemTnew unclickable">
                    <div class="newlist"
                         v-for="(item,index) in homeIndicateList"
                         :key="index"
                         @click="zbhandle(item,index)">
                        <div class="Itop">
                            <img :src="item.ImgUrl" />
                            <div v-if="item.Num"
                                 class="number-show">{{item.Num}}</div>
                        </div>
                        <p class="Ibottom">
                            {{item.Name}}
                        </p>
                    </div>
                    <!-- <div class="newlist" @click="showPositionValue=true">
                        <div class="Itop">
                            <img src="../../assets/3-4.png" />
                        </div>
                        <p class="Ibottom">
                            不受控重大危险源
                        </p>
                    </div>
                    <div class="newlist" @click="showPositionValue=true">
                        <div class="Itop">
                            <img src="@static/images/index/icon5.png" />
                            <div class="number-show">23</div>
                        </div>
                        <p class="Ibottom">
                            重大隐患数量
                        </p>
                    </div>
                    <div class="newlist" @click="showPositionValue=true">
                        <div class="Itop">
                            <img src="@static/images/index/icon6.png" />
                        </div>
                        <p class="Ibottom">
                            逾期未整改隐患
                        </p>
                    </div>
                    <div class="newlist" @click="showPositionValue=true">
                        <div class="Itop">
                            <img src="@static/images/index/icon7.png" />
                        </div>
                        <p class="Ibottom">
                            安全检查次数
                        </p>
                    </div>
                    <div class="newlist" @click="showPositionValue=true">
                        <div class="Itop">
                            <img src="../../assets/3-4.png" />
                        </div>
                        <p class="Ibottom">
                            不受控重大危险源
                        </p>
                    </div>
                    <div class="newlist" @click="showPositionValue=true">
                        <div class="Itop">
                            <img src="@static/images/index/icon5.png" />
                        </div>
                        <p class="Ibottom">
                            重大隐患数量
                        </p>
                    </div>
                    <div class="newlist" @click="showPositionValue=true">
                        <div class="Itop">
                            <img src="@static/images/index/icon6.png" />
                        </div>
                        <p class="Ibottom">
                            逾期未整改隐患
                        </p>
                    </div>
                    <div class="newlist" @click="showPositionValue2=true">
                        <div class="Itop">
                            <img src="@static/images/index/more2.png" />
                        </div>
                        <p class="Ibottom moreMsg">
                            更多
                        </p>
                    </div> -->
                </div>
            </div>
        </div>

        <!-- 模态框 -->
        <!-- <toast v-model="showPositionValue"
               type="text"
               :time="1200"
               width="200px"
               is-show-mask
               :text="('该模块暂未开通 ！')"
               :position="tosPosition"></toast>
        <toast v-model="showPositionValue2"
               type="text"
               :time="1200"
               width="200px"
               is-show-mask
               :text="('暂无更多内容 ！')"
               :position="tosPosition"></toast> -->

    </div>
</template>

<script>
import { InlineLoading } from 'vux'
export default {
    components: {
        InlineLoading
    },
    data () {
        return {
            userInfo: {}, // 用户信息
            departsir: '', // 用户类型
            isShow: false, // 是否显示更多代办事项
            istoggleDown: false, // 代办事项是否下拉显示更多
            moreMsg: '更多', // 代办事项toggle显示信息
            dotShow: false, // 是否显示轮播提示点
            isUnClickable: false, // 是否可点击跳转
            tosPosition: 'center',
            homeList: {},
            imgList: [
                {
                    imgUrl: './static/images/index/banner.jpg'
                },
                {
                    imgUrl: './static/images/index/banner.png'
                }
            ],
            // forewarnList: [
            //     {
            //         title: '不受控重大危险源',
            //         imgUrl: './static/images/index/icon1.png',
            //         warningCount: 12
            //     },
            //     {
            //         title: '违章超三次人员',
            //         imgUrl: './static/images/index/icon2.png'
            //     },
            //     {
            //         title: '未整改重大隐患',
            //         imgUrl: './static/images/index/icon3.png'
            //     },
            //     {
            //         title: '不受控重大危险源',
            //         imgUrl: './static/images/index/icon1.png'
            //     },
            //     {
            //         title: '违章超三次人员',
            //         imgUrl: './static/images/index/icon2.png'
            //     },
            //     {
            //         title: '不受控重大危险源',
            //         imgUrl: './static/images/index/icon1.png',
            //         warningCount: 5
            //     }
            // ],
            forewarnList: [
                {
                    title: '不受控重大危险源',
                    imgUrl: './static/images/index/icon1.png',
                    warningCount: 12
                },
                {
                    title: '违章超三次人员',
                    imgUrl: './static/images/index/icon2.png'
                }
            ],
            broadcastList: [
            ],
            homeTodoList: [], // 代办事项列表
            homeTodoList2: [], // 可显示的代办事项
            homeWarnList: [], // 安全预警列表
            homeIndicateList: [] // 安全指标列表
        }
    },
    created () {
        if (localStorage.getItem('userInfo')) {
            this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
            this.departsir = this.userInfo.departsir
            this.getData()
            this.getAffiche()
            // this.forewarnList = this.arrSlice(this.forewarnList)
            // this.getTotalData()
        }
        // console.log(this.userInfo)
    },
    methods: {
        getData () {
            var that = this
            this.$vux.loading.show({
                text: '加载中...'
            })
            var params = {
                'allowPaging': true,
                'business': 'GetMainDataByUserId',
                'pageIndex': 0,
                'pageSize': 0,
                'tokenId': '',
                'userId': this.userInfo.userid
            }

            this.$axiosAjax.getConfigJson(params)
                .then((res) => {
                    // console.log(res)
                    if (res.data.code == 0) {
                        that.homeWarnList = res.data.data.yj
                        that.homeIndicateList = res.data.data.zb

                        that.homeTodoList = res.data.data.db
                        // console.log(that.homeTodoList)
                        that.homeTodoList.forEach((item, index) => {
                            if (item.Num || item.Num != 0) {
                                that.isShow = true
                                that.homeTodoList2.push(item)
                            }
                            if (!item.Path || item.Path == '') {
                                that.isUnClickable = true
                            }
                        })
                        this.$forceUpdate()

                        if (that.homeWarnList.length) {
                            that.homeWarnList.push({
                                'Name': '更多',
                                'ImgUrl': './static/images/index/more2.png',
                                'Path': '/safetyWarning'
                            })
                        }
                        if (that.homeWarnList.length > 4) {
                            that.dotShow = true
                        }
                        that.homeWarnList = that.arrSlice(that.homeWarnList)

                        if (that.homeIndicateList.length) {
                            that.homeIndicateList.push({
                                'Name': '更多',
                                'ImgUrl': './static/images/index/more2.png',
                                'Path': '/safetyWarning'
                            })
                        }
                        this.$forceUpdate()
                        this.$vux.loading.hide()
                    } else {
                        this.$vux.toast.text(res.data.info)
                    }
                }).catch((response) => {
                    console.log(response)
                    this.$vux.loading.hide()
                })
        },
        // 获取待办事项列表数据
        getTotalData () {
            var that = this
            var params = {
                'allowPaging': true,
                'business': 'GetMainData',
                'data': {
                    'code': '0',
                    'type': '0'
                },
                'pageIndex': 0,
                'pageSize': 0,
                'tokenId': '',
                'userId': this.userInfo.userid
            }
            this.$axiosAjax.getConfigJson(params)
                .then((res) => {
                    // console.log(res)
                    if (res.data.code == 0) {
                        that.homeTodoList = res.data.data.all
                        that.homeTodoList.forEach((item, index) => {
                            if (!item.Num || item.Num != 0) {
                                that.isShow = true
                                that.homeTodoList2.push(item)
                            }
                            if (!item.Path || item.Path == '') {
                                that.isUnClickable = true
                            }
                        })
                        this.$forceUpdate()
                    } else {

                    }
                }).catch((response) => {
                    console.log(response)
                })
        },
        // 待办事项点击更多
        handleToggle () {
            if (this.homeTodoList.length > 3) {
                this.istoggleDown = !this.istoggleDown
                if (this.istoggleDown) {
                    this.moreMsg = '点击收缩'
                } else {
                    this.moreMsg = '更多'
                }
            } else {
                this.$vux.toast.text('暂无更多内容！')
            }
        },
        // 安全预警列表数据处理
        arrSlice (arr) {
            const len = arr.length

            let result = []
            const sliceNum = 4

            for (let i = 0; i < len / sliceNum; i++) {
                result.push(arr.slice(i * sliceNum, (i + 1) * sliceNum))
            }

            // for(let j = 0; j < (sliceNum - len % sliceNum); j++) {
            //     result[result.length - 1].push({})
            // }

            // console.log(result)
            return result
        },
        // 点击待办事项
        dbhandle (item, index) {
            if (item.Path == '' || !item.Path) {
                this.$vux.toast.text('该模块暂未开通 ！')
            } else {
                if (item.Name == '待整改隐患') {
                    this.$router.push({
                        path: item.Path,
                        query: {
                            showMainIndex: '1'
                        }
                    })
                } else {
                    this.$router.push(item.Path)
                }
            }
        },
        // 点击安全预警的指标,code=1安全预警，code=2安全指标
        yjhandle (item, item2, index2) {
            if (item2.Path == '' || !item2.Path) {
                this.$vux.toast.text('该模块暂未开通 ！')
            } else {
                if (index2 == item.length - 1) {
                    this.$router.push({ path: item2.Path, query: { code: 1 } })
                } else {
                    this.$router.push(item2.Path)
                }
            }
        },
        // 点击安全指标
        zbhandle (item, index) {
            if (item.Path == '' || !item.Path) {
                this.$vux.toast.text('该模块暂未开通 ！')
            } else {
                if (index == this.homeIndicateList.length - 1) {
                    this.$router.push({ path: item.Path, query: { code: 2 } })
                } else {
                    this.$router.push(item.Path)
                }
            }
        },
        // 公告点击更多
        // showMore () {
        //     this.$vux.toast.text('该模块暂未开通 ！')
        // }
        getAffiche () { // 获取通知公告
            var params = {
                'business': 'GetAffiche',
                'data': {},
                'pageIndex': 0,
                'pageSize': 3,
                'userId': this.userInfo.userid
            }

            this.$axiosAjax.getConfigJson(params)
                .then((res) => {
                    if (res.data.code == 0) {
                        this.broadcastList = res.data.data.result
                    }
                }).catch((response) => {
                })
        }
    }
}
</script>
<style scoped>
.loadingBox .loading_section {
    height: 300px;
    justify-content: center;
    display: flex;
    align-items: center;
}
.contentBox {
    min-height: 100%;
    /* height: 100%; */
    background: #ebeef2;
    padding-bottom: 60px;
}

/* 轮播图 */
.vux-swiper img {
    width: 100%;
}

.imgSwiperWrap {
    position: relative;
}

/* 公告轮播 */
.broadMarqueeWrap {
    width: 100%;
    position: absolute;
    bottom: 0;
}

.contentBox .broadMarquee {
    height: 35px !important;
    font-size: 12px;
    position: relative;
    z-index: 2;
}

.broadMarquee .broadcastMsg {
    width:250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    float: left;
}

.broadMarqueeWrap .moreBtn {
    display: block;
    /* position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -10px; */
    float: right;
    margin-right: 10px;
    /* margin-top: 8px; */
    width: 49px;
    height: 20px;
    font-size: 10px;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 17px;
}
.broadMarqueeWrap p {
    position: absolute;
    top:0;
    left: 10px;
    height: 35px;
    line-height: 35px;
    font-size: 14px;
    color: #fff;
    z-index: 4;
}
.broadMarqueeWrap a {
    position: absolute;
    right: 10px;
    top: 7px;
    width: 49px;
    height: 20px;
    line-height: 20px;
    font-size: 10px;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 17px;
    z-index: 2;
    text-align: center;
}
.vux-marquee-box li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 35px;
    line-height: 35px;
    padding-left: 45px;
    color: #fff;
    background: url('/static/images/index/broadcast.png') no-repeat 20px center;
    background-size: 13.5px 12px;
}

.contentBox .backBench {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 35px;
    /* background-color: #000;
    opacity: 0.5;
    filter: alpha(opacity=50);  */
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

/* 单位名称 */
.unitSection {
    height: 70px;
    line-height: 50px;
    font-size: 12px;
    background: #2269ff;
    padding: 0 13px 0 21px;
}

.unitSection_l {
    padding-left: 26px;
    background: url('/static/images/index/unit.png') no-repeat 0 center;
    background-size: 20px 18px;
}

.unitSectionName {
    color: #fff;
}

.unitSection_r {
    /* background: url('../../assets/jinru.png') no-repeat right center; */
    background-size: 12px 12px;
    padding-right: 16px;
}

.unitSection_r span {
    color: #fff;
}

/* 代办事项 */
.nothings {
    font-size: 13px;
    text-align: center;
}
.backlog {
    position: relative;
    top: -20px;
    background: #fff;
    border-radius: 18px;
    padding: 0 20px 30px 20px;
}

.backlogHead {
    height: 42px;
    line-height: 42px;
}

.backlogHead_l {
    font-size: 15px;
    font-weight: bold;
}

.backlogHead_r {
    padding-right: 16px;
    font-size: 12.5px;
    color: #999;
    background: url('/static/images/index/more.png') no-repeat right center;
    background-size: 10px 10px;
}
.backlogWrap {
    margin-left: 15px;
}
.backlogContent {
    width: 100%;
    padding-top: 12px;
}

.backlogList {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    align-content: center;
    flex-wrap: wrap;
}

.backlogItem {
    width: 75px;
    margin-top: 16px;
    margin-right: 40px;
    text-align: center;
}
.backlogItem:nth-of-type(3n + 3) {
    margin-right: 0;
}

.backlogNum {
    color: #2269ff;
    font-size: 24px;
    line-height: 28px;
    font-weight: bold;
}

.backlogTit {
    font-size: 12px;
    line-height: 27px;
}

/* 安全预警 */
.forewarning {
    background-color: #fff;
    border-radius: 17px;
    padding: 14px 17px 10px;
    margin-bottom: 20px;
}
.forewarning .newHeader {
    display: flex;
    justify-content: space-between;
    width: 100;
}
.forewarning .mycode {
    font-size: 15px;
    color: #333333;
    font-weight: bold;
    height: 20px;
    line-height: 20px;
}
.forewarning .editMsg {
    width: 50px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    border: 1px solid #2269ff;
    color: #2269ff;
    border-radius: 10px;
}
.forewarnContent .warnSwiperItem {
    width: 100%;
    display: flex;
    justify-content: flex-start;
}
.forewarnContent .warnSwiper .newlist {
    width: 60px;
    margin-top: 16px;
    margin-right: 32px;
}
.forewarnContent .warnSwiper .newlist:nth-of-type(4n + 4) {
    margin-right: 0;
}
.forewarnContent .warnSwiperItem:last-child .newlist:last-child p {
    color: #999;
}

/* 安全指标 */
.indicantContent {
    min-height: 100px;
}
.indicant {
    background-color: #fff;
    border-radius: 17px;
    padding: 14px 17px 14px;
    margin-bottom: 20px;
}
.indicantList {
    /* padding-bottom: 20px; */
}
.indicant .newHeader {
    display: flex;
    justify-content: space-between;
    width: 100;
}
.indicant .mycode {
    font-size: 15px;
    color: #333333;
    font-weight: bold;
    height: 20px;
    line-height: 20px;
}
.indicant .editMsg {
    width: 50px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    border: 1px solid #2269ff;
    color: #2269ff;
    border-radius: 10px;
}
.indicant .itemT {
    width: 100%;
    display: flex;
    /* justify-content: space-between; */
}
.itemT .newlist {
    width: 68px;
    margin-top: 16px;
}
.newlist .Itop {
    width: 28px;
    height: 28px;
    margin: 0 auto;
    position: relative;
}
.newlist .number-show {
    display: none;
    position: absolute;
    top: -8px;
    right: -8px;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: #ff0000;
    color: #fff;
    font-size: 10px;
    text-align: center;
    line-height: 15px;
}
.newlist img {
    width: 100%;
    height: 100%;
}
.Ibottom {
    font-size: 12px;
    text-align: center;
    line-height: 14px;
    margin-top: 7px;
}
.itemTnew {
    flex-wrap: wrap;
}
.itemTnew .newlist {
    margin-right: 22px;
}
.itemTnew .newlist:nth-child(4n + 4) {
    margin-right: 0;
}
.indicant .newlist:last-child .Ibottom {
    color: #999;
}
.unclickable .Ibottom,
.unclickable .backlogTit {
    color: #ccc;
}
</style>
<style>
.weui-loading_toast .weui-toast__content {
    color: #fff;
    font-size: 14px;
}
.weui-toast_text .weui-toast__content {
    color: #fff;
    font-size: 14px;
}
.weui-loading_toast .weui-toast {
    width: 100px;
    min-height: 40px;
    height: 100px;
    top: 280px;
    background: rgba(17, 17, 17, 0.65);
}
.warnSwiper .vux-icon-dot {
    width: 15px !important;
    height: 3px !important;
}
.warnSwiper .vux-icon-dot.active {
    background: #2269ff !important;
}
.forewarnContent .vux-slider .vux-indicator-right,
.forewarnContent .vux-slider > .vux-indicator {
    right: 50%;
    margin-right: -19px;
}
.swiperImg {
    height: 100%;
    object-fit: fill;
}
</style>
